/*
 * 	调用示例
	function createObj(){
		var obj = {
			actionUrl:"",    //ajax要去调用的action
			topLocation:"598px",        //定位，如果不传定位值的话，会使用js里的默认值，即默认定位到屏幕中央
			leftLocation:"522px",
			inputLabel:b,               //可以传input标签的id值，也可以直接传一个单纯的值（这个值不是指input标签的value值）
			hiddenLabel:a,              //可以传hidden标签的id值，也可以直接传一个单纯的值（这个值不是指hidden标签的value值）
			alertNum:"3",               //最多可以选几项   
			hintTitle:"国家类别",          //弹出层标题
			selectedTitle:"已选国家：",    //已选项的标题
			confirmFunction:function(code,name){
				//document.getElementById("pop2").value = name;
				a = code;
				b = name;
			}
		}
		popupChannel(obj);     //这是要去调用pop.js文件中的popChannel()方法
	}
	
 	<input id="pop" value="" type="button" style="width:250px; cursor:pointer;" onclick="createObj();" />
 */

var popChannelAgencyFlag = false;

function popupChannelAgency(obj){
	if(!popChannelAgencyFlag){
		if(obj.topLocation == undefined){     //当不在obj对象里定义topLocation和leftLocation属性时，我们要在这里给它一个默认值，默认定义在页面中央。
			obj.topLocation = document.body.scrollTop + document.documentElement.scrollTop + 30;			
			if(obj.leftLocation == undefined){
				obj.leftLocation = Math.round(document.documentElement.clientWidth/2 - 655/2);    //655就是这个弹出框的宽度
			}
		}
		
		var overlay = "<div id='dialog-overlay' class='dialog-overlay'></div>";
		$("body").append(overlay);
		
		var dialogbox = "<div id='dialog-box' class='dialog-box'></div>";
		$("body").append(dialogbox);
		
		
		var operatebutton = "<div id='operateButton' class='operateButton'></div>";
		var dialogcontent = "<div id='dialog-content' class='dialog-content'></div>";
		$("#dialog-box").append(operatebutton, dialogcontent);
		
		
		var hint = "<div id='hint' class='hint'><font id='hintTitle'>" + obj.hintTitle + "</font><font id='alertNum' style='font-size:12px;'>（最多添加" + obj.alertNum + " 项）</font></div>";
		var cancel = "<div id='cancel' class='cancel'><a href='javascript:void(0)' class='cancelButton' onclick='cancelChannel()'>[取消]</a></div>";
		var determine = "<div id='determine' class='determine'><a href='javascript:void(0)' id='confirmButton' class='confirmButton'>[确定]</a></div>";
		$("#operateButton").append(hint, cancel, determine);
		document.getElementById('confirmButton').onclick = function(){confirmChannel(obj)};     //当用字符串拼接的形式写标签时，无法在onclick事件中传递一个对象，只能传字符串（如obj.inputLabel），所以这里用javascript加的onclick事件，这样就能传递obj对象了。
		
		var selectedmessage = "<div id='selected-message' class='selected-message'>" +
									"<font id='selectedTitle' style='font-weight: bold; color:blue;'>" + obj.selectedTitle + "</font><br>" +
									"<div id='selected-message1'>" +				
									"</div></div>";
		var dialogmessage = "<div id='dialog-message' class='dialog-message'></div>";
		$("#dialog-content").append(selectedmessage, dialogmessage);
		
		
		popChannelAgencyFlag = true;     //每次点击弹出层后，这些div只加一次，所以加上了标记位popChannelAgencyFlag来限制
	}
	else     //第二次点击弹出层，就会进到else语句。这时弹出层里的div都已经存在了，所以只要修改动态值即可。
	{
		if(obj.topLocation == undefined){     //当不在obj对象里定义topLocation和leftLocation属性时，我们要在这里给它一个默认值，默认定义在页面中央。
			obj.topLocation = document.body.scrollTop + document.documentElement.scrollTop + 30;			
			if(obj.leftLocation == undefined){
				obj.leftLocation = Math.round(document.documentElement.clientWidth/2 - 655/2);    //655就是这个弹出框的宽度
			}
		}
		
		document.getElementById('hintTitle').innerHTML = obj.hintTitle;
		document.getElementById('alertNum').innerHTML = "（最多添加" + obj.alertNum + " 项）";
		document.getElementById('selectedTitle').innerHTML = obj.selectedTitle;
		document.getElementById('confirmButton').onclick = function(){confirmChannel(obj)};
	}
	
	
	$.ajax({
		async : false,
		cache : false,
		type : 'GET',
		dataType : "jsonp",    //将html改成jsonp(跨域调用)，不影响之前的弹出层效果
		jsonp: "callbackParam",    		   //这个属性也可以不写，默认为"callback"
		jsonpCallback:"callbackMethod",    //该属性不写也可以，因为jquery中的跨域调用可以直接将返回的数据放在success函数中处理，就相当于在success函数中自动虚拟并调用了一个callbackMethod(data)函数，data即是后台做好的json格式数据。
		data : "",             //这里的data属性是用来将前台的值传给后台。如可以写成data:"waArea.code=" + parId
		url : obj.actionUrl,
		error : function(XMLHttpRequest, textStatus, errorThrown) {    //请求失败处理函数
			//alert("提交失败！");
			//这几个参数可以打出错误类型
			alert("请求对象XMLHttpRequest: "+XMLHttpRequest);  
	        alert("错误类型textStatus: "+textStatus);  
	        alert("异常对象errorThrown: "+errorThrown);  
		},
		success : function(data) {    //请求成功后处理函数。这里function括号里的参数data，指的是从后台取出来的数据
			var result = eval(data);
			
			$('#dialog-message').empty();     //如果是第二次点击弹出层，则必须把上次添加的元素内容清空，否则每次点击都会重复添加	
			$('#selected-message1').empty();
				
			for (var i = 0; i < result.length; i++) {				
				var FirstChannelName = result[i].value;     //result[i].value中的value，是在对应action类中为JSON对象加入的属性	
				
				var messageHtml = "<div id='firstChannel' style='margin-bottom:4px; margin-top:4px; color:blue; font-weight:bold; width:640px; float:left;'>" + FirstChannelName + "</div>";				
				$('#dialog-message').append(messageHtml);
									
				var content = result[i].content;				
				for(var j = 0; j < content.length; j++){
					var checkboxKey = content[j].key;
					var SecondChannelName = content[j].value;
										
					var checkboxHtml = "<input type='checkbox' id='a" + checkboxKey + "' name='ids22' value='" + checkboxKey + "' onclick='selectCheckbox(this,\"" + SecondChannelName + "\",\"" + obj.alertNum + "\")'/>";																			
					var messageHtml1 = "<div class='secondChannel' name='secondChannel' style='display:inline; font-size:12px;'>" + SecondChannelName + "</div>";					

					var messageHtml2 = "<div style='float:left; width:210px; height:20px;'>" + checkboxHtml + messageHtml1 + "</div>";
					$('#dialog-message').append(messageHtml2);	
				}
			}	
				
						
			var hiddenValue = "";
			if(obj.hiddenLabel){	  //如果不在obj对象中定义hiddenLabel属性(即obj.hiddenLabel==undefined)，则弹出层在打开时不会保留之前的选中状态；如果定义了则会保留选中状态。另外，最后向后台提交所选项目的key值时，是利用这个hidden标签的value属性值提交过去的。
				if(document.getElementById(obj.hiddenLabel)){    //如果定义了hiddenLabel属性，且传的是一个hidden标签的id值，则这个hidden标签必然要存在
					hiddenValue = $("#" + obj.hiddenLabel).val();
				}else{    //如果定义了hiddenLabel属性，且传的是一个普通的值
					hiddenValue = obj.hiddenLabel;
				}
			}			
			var popValue = "";
			if(obj.inputLabel){
				if(document.getElementById(obj.inputLabel)){
					popValue = $("#" + obj.inputLabel).val();
				}else{
					popValue = obj.inputLabel;
				}
			}
			
			if(hiddenValue != "" && popValue != ""){     
				var cc = hiddenValue.split(",");
				var dd = popValue.split(",");	
				
				for(var m = 0; m < cc.length; m++){		
					var items = document.getElementsByName("ids22");
					for(var n = 0; n < items.length; n++){
						if(items[n].value == cc[m]){
							items[n].checked = true;							
							selectCheckbox(items[n], dd[m], obj.alertNum);
						}
					}					
				}
			}
		}
	});	
	
	
	//定位、显示弹出层
	$('#dialog-box').css({top:obj.topLocation, left:obj.leftLocation}).show();	
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();	
	
	
	//拖动功能
	var _move = false; 		//移动标记
	var _x, _y; 			//鼠标离控件左上角的相对位置
	$("#operateButton").mousedown(function(e) {
		_move = true;
		_x = e.pageX - parseInt($("#dialog-box").css("left"));
		_y = e.pageY - parseInt($("#dialog-box").css("top"));
		
		e.preventDefault();    //(拖动时阻止区域文字被选中)for chrome firefox ie9 || less than ie9
    });
	
	$(document).mousemove(function(e) {
		if (_move) {
			e.preventDefault();		//(拖动时阻止区域文字被选中)for chrome firefox ie9 || less than ie9
			var x = e.pageX - _x;	//移动时根据鼠标位置计算控件左上角的绝对位置
			var y = e.pageY - _y;
			$("#dialog-box").css({top: y, left: x}); 	  //控件新位置
		}
	}).mouseup(function() {
		_move = false;
	});
}
	


function selectCheckbox(checkboxHtml, SecondChannelName, alertNum)
{	
	var items = document.getElementsByName("ids11");
		
	if(checkboxHtml.checked){
		//这段代码是为了解决快速点击某个元素后，重复添加的问题
		for (var i = 0; i < items.length; i++) { 
			if(items[i].value == checkboxHtml.value){     //如果点击时传过来的checkboxHtml元素已经被选中/添加了，则不再重复选中/添加
				return;
			}
		}
		
		if(items.length > alertNum-1 && checkboxHtml.checked){		
			checkboxHtml.checked = false;
			alert("最多只能添加" + alertNum + "项");	         //取消一个元素时不会去提示最多添加几项，所以应该将这段代码写到选中一个元素的代码里面	
			return;
		}
		
		var checkbox = "<input type='checkbox' name='ids11' value='" + checkboxHtml.value + "' onclick='selectCheckbox(this,\"" + SecondChannelName + "\",\"" + alertNum + "\")' checked='checked'/>";		
		var messageHtml1 = "<div id='" + checkboxHtml.value + "' name='secondChannel1' style='display:inline; font-size:12px;'>" + SecondChannelName + "</div>";
		
		var selectedHtml = "<div id='" + checkboxHtml.value + "' style='float:left; width:210px; height:20px;'>" + checkbox + messageHtml1 + "</div>";
		$('#selected-message1').append(selectedHtml);
	}	
	
	if(!checkboxHtml.checked){	
		var parent = document.getElementById("selected-message1");
		var child = document.getElementById(checkboxHtml.value);
		if(child != undefined && child != null){    //这里的判断也是为了解决快速点击时出现的bug    
			parent.removeChild(child);
		}
		
		var aaa = document.getElementById("a" + checkboxHtml.value);
		if(aaa != undefined && aaa != null){
			aaa.checked = false;
		}
	}
}



function confirmChannel(obj){	
	var str = "";   
	var strKey = "";	
	var items = $("[name = 'secondChannel1']"); 
	for (var i = 0; i < items.length; i++) { 		
		str += items[i].innerHTML + ","; 
		strKey += items[i].id + ",";
		if(i == items.length - 1){
			str = str.substring(0, str.length - 1);
			strKey = strKey.substring(0, strKey.length - 1);
		}			
	}
	
	//如果inputLabel和hiddenLabel分别是input标签与hidden标签的id，则给标签的value属性赋值
	if(obj.inputLabel && document.getElementById(obj.inputLabel)){    //这里也可写成obj.inputLabel != undefined && document.getElementById(obj.inputLabel) != undefined
		$("#" + obj.inputLabel).val(str);
	}
	if(obj.hiddenLabel && document.getElementById(obj.hiddenLabel)){
		$("#" + obj.hiddenLabel).val(strKey);
	}
	
	//如果存在参数functionBody且等于1，则执行页面的checkForm1函数
	if(obj.functionBody == 1){        //如果变量functionBody的值为1，则说明调用本js的jsp页面中包含有checkForm1()方法，可以使用该方法。
		checkForm1(obj.inputLabel);
	}
		
	if(obj.confirmFunction && typeof obj.confirmFunction == "function"){    //如果obj.confirmFunction这个属性存在（也可写成obj.confirmFunction != undefined），且该属性的值是一个function函数，则去回调该函数。
		obj.confirmFunction(strKey,str);		//调用回调函数。回调函数：本来是jsp页面来调用js控件，现在js控件又回去调jsp页面了。好处就是我（jsp页面）是调用js控件的主动方，我最后想执行什么由我决定，而非js控件决定。
	}
	
	
	$('#dialog-overlay, #dialog-box').hide();	
}


function cancelChannel(){
	$('#dialog-overlay, #dialog-box').hide();
}


